<template>
  <Pad>
    <ValidationObserver
      ref="observer"
      v-slot="{ passes, invalid }"
      tag="form"
      @submit.prevent="submit()"
    >
      <van-cell-group>
        <ValidationProvider name="姓名" rules="required|isName" v-slot="{ errors }">
          <van-field
            v-model="form.name"
            placeholder="请输入姓名"
            label="姓名"
            clearable
            :error-message="errors[0]"
          />
        </ValidationProvider>

        <sex v-model="form.sex" />

        <ValidationProvider name="身份证号" rules="required|isIdCard" v-slot="{ errors }">
          <van-field
            v-model="form.idCard"
            placeholder="请输入身份证号"
            label="身份证号"
            clearable
            :error-message="errors[0]"
          />
        </ValidationProvider>

        <area-list v-model="form.area" />

        <town v-model="form.town" />

        <ValidationProvider name="联系方式" rules="required|isPhone" v-slot="{ errors }">
          <van-field
            v-model="form.phone"
            placeholder="请输入联系方式"
            label="联系方式"
            clearable
            :error-message="errors[0]"
          />
        </ValidationProvider>

        <ValidationProvider name="供浆证号">
          <van-field v-model="form.bloodCard" placeholder="请输入供浆证号" label="供浆证号" clearable />
        </ValidationProvider>
        <van-field :value="userInfo.inviteCode" label="邀请码" disabled />
      </van-cell-group>
      <div class="btn-wrapper">
        <van-button type="primary" block :disabled="invalid" round color="#FF6363">提交</van-button>
      </div>
    </ValidationObserver>
  </Pad>
</template>

<script>
import { Toast } from "vant";
import Pad from "@/components/pad";
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import zh from "vee-validate/dist/locale/zh_CN";
import { realNameAuth, getArea, selectArea } from "@/api/user.js";
import Tip2 from "@/components/tip/tip2";
import store from "@/store";
import router from "@/router";
import { mapState, mapGetters } from "vuex";

import Sex from "./components/sex";
import AreaList from "./components/area";
import Town from "./components/town";
extend("isName", {
  validate: value => {
    const reg = /^[\u4e00-\u9fef\u3400-\u4DB5]{2,5}$/;
    return reg.test(value);
  },
  message: "请填写正确姓名"
});
extend("isIdCard", {
  validate: value => {
    const reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X))$/;
    return reg.test(value);
  },
  message: "请填写正确的身份证号"
});
extend("isPhone", {
  validate: value => {
    const reg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
    return reg.test(value);
  },
  message: "请填写正确的手机号"
});
extend("required", {
  ...required,
  message: zh.messages["required"]
});

export default {
  data() {
    return {
      form: {
        name: "",
        sex: "",
        idCard: "",
        area: "",
        town: "",
        phone: "",
        bloodCard: ""
      }
    };
  },
  components: {
    Pad,
    ValidationObserver,
    ValidationProvider,
    Sex,
    AreaList,
    Town
  },
  created() {
    const {
      name,
      sex,
      idCard,
      province,
      city,
      county,
      town,
      phone,
      bloodCard
    } = this.userInfo;
    this.form = {
      name,
      sex,
      idCard,
      area: [province, city, county],
      town,
      phone,
      bloodCard
    };
    console.log("form");
    console.log(this.form);
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    submit(obj) {
      console.log("submit");
      // Toast.loading({
      //   message: "正在修改个人信息，请稍等...",
      //   forbidClick: true,
      //   loadingType: "spinner",
      // });
      var data = {
        name: this.form.name,
        sex: this.form.sex,
        idCard: this.form.idCard,
        province: this.form.area[0],
        city: this.form.area[1],
        county: this.form.area[2],
        town: this.form.town,
        phone: this.form.phone,
        bloodCard: this.form.bloodCard
      };
      console.log(data);
      realNameAuth(data).then(res => {
        if (res.code == 1102) {
          // 该地区尚未开通浆站提示
          this.$tip.show({ type: 2 });
        } else {
          Toast.success("修改个人信息成功");
        }
      });
    }
  }
};
</script>

<style lang='scss'>
.links {
  border-radius: 0.213333rem /* 16/75 */;
  overflow: hidden;
}

.btn-wrapper {
  margin-top: 1.066667rem /* 80/75 */;
  padding: 0 1.6rem /* 120/75 */;
}
</style>
